<template>
  <div class="orders-page">
    <div class="orders-container">
      <!-- 左侧导航 -->
      <div class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="today">
            <el-icon><Calendar /></el-icon>
            <span>今日订单</span>
          </el-menu-item>
          <el-menu-item index="history">
            <el-icon><Clock /></el-icon>
            <span>历史订单</span>
          </el-menu-item>
          <el-menu-item index="reservation">
            <el-icon><Calendar /></el-icon>
            <span>预约信息</span>
          </el-menu-item>
          <el-menu-item index="queue">
            <el-icon><List /></el-icon>
            <span>排号订单</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容 -->
      <div class="main-content">
        <!-- 今日订单 -->
        <div v-if="activeMenu === 'today'" class="order-section">
          <div class="section-header">
            <h3>今日订单</h3>
            <el-button type="primary" @click="refreshTodayOrders" :loading="loading">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>

          <div v-if="loading" class="loading-container">
            <el-skeleton :rows="3" animated />
          </div>

          <div v-else-if="todayOrders.length === 0" class="empty-container">
            <el-empty description="暂无今日订单" />
          </div>

          <div v-else class="order-list">
            <div
              v-for="order in todayOrders"
              :key="order.orderId"
              class="order-item"
              @click="viewOrderDetail(order)"
            >
              <div class="order-header">
                <div class="order-info">
                  <span class="order-number">{{ order.orderNo }}</span>
                  <span class="order-time">{{ formatDateTime(order.createTime) }}</span>
                </div>
                <div class="order-status" :class="getStatusClass(order.status)">
                  {{ getStatusText(order.status) }}
                </div>
              </div>
              
              <div class="order-content">
                <div class="customer-info">
                  <span class="customer-name">{{ order.customerName || '门店' }}</span>
                  <span class="table-number">桌号: {{ order.tableId || '未知' }}</span>
                  <span class="order-type">类型: {{ getOrderTypeText(order.orderType) }}</span>
                </div>
                
                <div class="order-summary">
                  <span class="total-amount">¥{{ order.totalAmount }}</span>
                  <span class="payment-method">{{ getPaymentMethodText(order.payMethod) }}</span>
                </div>
              </div>
              
              <div class="order-actions">
                <el-button size="small" @click.stop="viewOrderDetail(order)">查看订单</el-button>
                <el-button size="small" type="danger" @click.stop="deleteOrder(order.orderId)">删除</el-button>
                <el-button size="small" type="warning" @click.stop="reverseOrder(order.orderId)">反位</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 历史订单 -->
        <div v-else-if="activeMenu === 'history'" class="order-section">
          <div class="section-header">
            <h3>历史订单</h3>
            <div class="search-filters">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :shortcuts="dateShortcuts"
              />
              <el-button type="primary" @click="searchHistoryOrders" :loading="loading">搜索</el-button>
              <el-button @click="clearDateRange">清空</el-button>
              <el-button @click="resetHistoryOrders">重置</el-button>
            </div>
          </div>

          <!-- 搜索结果统计 -->
          <div v-if="dateRange && dateRange.length > 0" class="search-result-info">
            <el-alert
              :title="`搜索条件: ${dateRange[0]} 至 ${dateRange[1]} | 共找到 ${historyOrders.length} 条订单`"
              type="info"
              :closable="false"
              show-icon
            />
          </div>

          <div v-if="loading" class="loading-container">
            <el-skeleton :rows="3" animated />
          </div>

          <div v-else-if="historyOrders.length === 0" class="empty-container">
            <el-empty description="暂无历史订单" />
          </div>

          <div v-else class="order-list">
            <div
              v-for="order in historyOrders"
              :key="order.orderId"
              class="order-item"
              @click="viewOrderDetail(order)"
            >
              <div class="order-header">
                <div class="order-info">
                  <span class="order-number">{{ order.orderNo }}</span>
                  <span class="order-time">{{ formatDateTime(order.createTime) }}</span>
                </div>
                <div class="order-status" :class="getStatusClass(order.status)">
                  {{ getStatusText(order.status) }}
                </div>
              </div>
              
              <div class="order-content">
                <div class="customer-info">
                  <span class="customer-name">{{ order.customerName || '门店' }}</span>
                  <span class="table-number">桌号: {{ order.tableId || '未知' }}</span>
                  <span class="order-type">类型: {{ getOrderTypeText(order.orderType) }}</span>
                </div>
                
                <div class="order-summary">
                  <span class="total-amount">¥{{ order.totalAmount }}</span>
                  <span class="payment-method">{{ getPaymentMethodText(order.payMethod) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预约信息 -->
        <div v-else-if="activeMenu === 'reservation'" class="order-section">
          <div class="section-header">
            <h3>预约信息</h3>
            <el-button type="primary" @click="addReservation">新增预约</el-button>
          </div>

          <div class="reservation-list">
            <div
              v-for="reservation in reservations"
              :key="reservation.id"
              class="reservation-item"
            >
              <div class="reservation-header">
                <span class="reservation-time">{{ reservation.reservationTime }}</span>
                <span class="reservation-status" :class="getStatusClass(reservation.status)">
                  {{ getStatusText(reservation.status) }}
                </span>
              </div>
              
              <div class="reservation-content">
                <div class="customer-info">
                  <span class="customer-name">{{ reservation.customerName }}</span>
                  <span class="phone">{{ reservation.phone }}</span>
                  <span class="people-count">人数: {{ reservation.peopleCount }}人</span>
                </div>
                
                <div class="reservation-actions">
                  <el-button size="small" type="success" @click="approveReservation(reservation.id)">同意</el-button>
                  <el-button size="small" type="danger" @click="rejectReservation(reservation.id)">拒绝</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 排号订单 -->
        <div v-else-if="activeMenu === 'queue'" class="order-section">
          <div class="section-header">
            <h3>排号订单</h3>
            <el-button type="primary" @click="addQueueOrder">添加取号桌型</el-button>
          </div>

          <div class="queue-list">
            <div
              v-for="queue in queueOrders"
              :key="queue.id"
              class="queue-item"
            >
              <div class="queue-header">
                <span class="queue-number">{{ queue.queueNumber }}</span>
                <span class="queue-status" :class="getStatusClass(queue.status)">
                  {{ getStatusText(queue.status) }}
                </span>
              </div>
              
              <div class="queue-content">
                <div class="customer-info">
                  <span class="customer-name">{{ queue.customerName }}</span>
                  <span class="people-count">人数: {{ queue.peopleCount }}</span>
                  <span class="queue-time">{{ queue.queueTime }}</span>
                </div>
                
                <div class="queue-info">
                  <span class="operator">{{ queue.operator }}</span>
                  <span class="table-type">{{ queue.tableType }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单详情弹窗 -->
    <el-dialog
      v-model="orderDetailVisible"
      title="订单详情"
      width="800px"
      :before-close="handleCloseOrderDetail"
    >
      <div v-if="selectedOrder" class="order-detail">
        <div class="detail-section">
          <h4>基本信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="订单号">{{ selectedOrder.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ formatDateTime(selectedOrder.createTime) }}</el-descriptions-item>
            <el-descriptions-item label="客户姓名">{{ selectedOrder.customerName || '门店' }}</el-descriptions-item>
            <el-descriptions-item label="桌号">{{ selectedOrder.tableId || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="订单类型">{{ getOrderTypeText(selectedOrder.orderType) }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{ getStatusText(selectedOrder.status) }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{ getPaymentMethodText(selectedOrder.payMethod) }}</el-descriptions-item>
            <el-descriptions-item label="总金额">¥{{ selectedOrder.totalAmount }}</el-descriptions-item>
            <el-descriptions-item label="订单备注" :span="2">{{ selectedOrder.notes || '无' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-section">
          <h4>订单明细</h4>
          <div v-if="orderItems.length === 0" class="empty-container">
            <el-empty description="暂无订单明细" />
          </div>
          <el-table v-else :data="orderItems" border>
            <el-table-column label="菜品名称" width="170">
              <template #default="scope">
                {{ scope.row.dishName || '未知菜品' }}
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="单价" width="120" />
            <el-table-column prop="quantity" label="数量" width="120" />
            <el-table-column label="规格" width="120">
              <template #default="scope">
                {{ scope.row.specName || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="口味" width="120">
              <template #default="scope">
                {{ scope.row.tasteName || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="subtotal" label="小计" width="120" />
          </el-table>
        </div>

        <div class="detail-section">
          <h4>订单汇总</h4>
          <div class="order-summary-detail">
            <span>合计: {{ orderItems.length }}份</span>
            <span class="total-amount">金额: ¥{{ selectedOrder.totalAmount }}</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="orderDetailVisible = false">关闭</el-button>
          <el-button type="primary" @click="checkoutOrder" :disabled="selectedOrder?.status === 'completed'">结账</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { runStatusTest } from '@/utils/statusTest'

const activeMenu = ref('today')
const orderDetailVisible = ref(false)
const selectedOrder = ref(null)
const dateRange = ref([])
const loading = ref(false)

// 今日订单数据
const todayOrders = ref([])

// 历史订单数据
const historyOrders = ref([])

// 订单明细数据
const orderItems = ref([])

// 预约信息数据
const reservations = ref([
  {
    id: 1,
    customerName: '李四',
    phone: '13800138000',
    peopleCount: 6,
    reservationTime: '2024-01-16 18:00:00',
    status: 'pending'
  }
])

// 排号订单数据
const queueOrders = ref([
  {
    id: 1,
    queueNumber: '5461',
    customerName: 'Megan',
    peopleCount: '1-2',
    queueTime: '2024-01-15 12:00:00',
    operator: '1001',
    tableType: '大桌',
    status: 'waiting'
  }
])

// 快速选择日期范围
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(end.getTime() - 7 * 24 * 60 * 60 * 1000)
      return [start.toISOString().slice(0, 10), end.toISOString().slice(0, 10)]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(end.getTime() - 30 * 24 * 60 * 60 * 1000)
      return [start.toISOString().slice(0, 10), end.toISOString().slice(0, 10)]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(end.getTime() - 90 * 24 * 60 * 60 * 1000)
      return [start.toISOString().slice(0, 10), end.toISOString().slice(0, 10)]
    }
  },
  {
    text: '最近一年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(end.getTime() - 365 * 24 * 60 * 60 * 1000)
      return [start.toISOString().slice(0, 10), end.toISOString().slice(0, 10)]
    }
  }
]

// 获取今日订单
const fetchTodayOrders = async () => {
  try {
    loading.value = true
    const response = await axios({
      url: '/api/orders/findalltoday',
      method: 'post'
    })
    if (response.data.code === 200) {
      todayOrders.value = response.data.data || []
      // 输出状态信息用于调试
      todayOrders.value.forEach(order => {
        console.log(`订单 ${order.orderNo} 状态: ${order.status}`)
      })
    } else {
      ElMessage.error(response.data.message || '获取今日订单失败')
    }
  } catch (error) {
    console.error('获取今日订单失败:', error)
    ElMessage.error('获取今日订单失败')
  } finally {
    loading.value = false
  }
}

// 获取历史订单
const fetchHistoryOrders = async () => {
  try {
    loading.value = true
    const response = await axios({
      url: '/api/orders/findalllishi',
      method: 'post'
    })
    if (response.data.code === 200) {
      historyOrders.value = response.data.data || []
      // 输出状态信息用于调试
      historyOrders.value.forEach(order => {
        console.log(`订单 ${order.orderNo} 状态: ${order.status}`)
      })
    } else {
      ElMessage.error(response.data.message || '获取历史订单失败')
    }
  } catch (error) {
    console.error('获取历史订单失败:', error)
    ElMessage.error('获取历史订单失败')
  } finally {
    loading.value = false
  }
}

// 按日期范围搜索历史订单
const searchHistoryOrdersByDateRange = async () => {
  try {
    if (!dateRange.value || dateRange.value.length === 0) {
      ElMessage.warning('请选择日期范围')
      return
    }
    
    // 验证日期范围
    const startDate = new Date(dateRange.value[0])
    const endDate = new Date(dateRange.value[1])
    
    if (startDate > endDate) {
      ElMessage.error('开始日期不能晚于结束日期')
      return
    }
    
    // 检查日期范围是否过大（比如超过一年）
    const diffTime = Math.abs(endDate - startDate)
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    if (diffDays > 365) {
      ElMessage.warning('日期范围过大，建议选择一年内的日期范围')
    }
    
    loading.value = true
    const requestData = {
      startDate: dateRange.value[0],
      endDate: dateRange.value[1]
    }
    
    const response = await axios({
      url: '/api/orders/findalllishiByDateRange',
      method: 'post',
      data: requestData
    })
    if (response.data.code === 200) {
      historyOrders.value = response.data.data || []
      ElMessage.success(`查询到 ${historyOrders.value.length} 条订单`)
      
      // 输出状态信息用于调试
      historyOrders.value.forEach(order => {
        console.log(`订单 ${order.orderNo} 状态: ${order.status}`)
      })
    } else {
      ElMessage.error(response.data.message || '按日期范围查询历史订单失败')
    }
  } catch (error) {
    console.error('按日期范围查询历史订单失败:', error)
    ElMessage.error('按日期范围查询历史订单失败')
  } finally {
    loading.value = false
  }
}

// 获取订单明细
const fetchOrderItems = async (orderId) => {
  try {
    const response = await axios({
      url: `/api/orders/${orderId}/items`,
      method: 'get'
    })
    if (response.data.code === 200) {
      orderItems.value = response.data.data || []
      console.log('订单明细数据:', orderItems.value) // 添加调试日志
    } else {
      ElMessage.error(response.data.message || '获取订单明细失败')
      orderItems.value = []
    }
  } catch (error) {
    console.error('获取订单明细失败:', error)
    ElMessage.error('获取订单明细失败')
    orderItems.value = []
  }
}

// 删除订单
const deleteOrder = async (orderId) => {
  try {
    await ElMessageBox.confirm('确定要删除这个订单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await axios({
      url: `/api/orders/${orderId}`,
      method: 'delete'
    })
    if (response.data.code === 200) {
      ElMessage.success(response.data.message || '订单删除成功')
      
      // 刷新订单列表
      if (activeMenu.value === 'today') {
        await fetchTodayOrders()
      } else if (activeMenu.value === 'history') {
        await fetchHistoryOrders()
      }
    } else {
      ElMessage.error(response.data.message || '删除订单失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除订单失败:', error)
      ElMessage.error('删除订单失败')
    }
  }
}

// 反位订单
const reverseOrder = async (orderId) => {
  try {
    await ElMessageBox.confirm('确定要反位这个订单吗？反位后原路返回用户所有金额，订单状态改为未付款。', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await axios({
      url: `/api/orders/${orderId}/reverse`,
      method: 'post'
    })
    if (response.data.code === 200) {
      ElMessage.success(response.data.message || '订单反位成功')
      
      // 刷新订单列表
      if (activeMenu.value === 'today') {
        await fetchTodayOrders()
      } else if (activeMenu.value === 'history') {
        await fetchHistoryOrders()
      }
    } else {
      ElMessage.error(response.data.message || '反位订单失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('反位订单失败:', error)
      ElMessage.error('反位订单失败')
    }
  }
}

// 结账
const checkoutOrder = async () => {
  try {
    const response = await axios({
      url: `/api/orders/${selectedOrder.value.orderId}/checkout`,
      method: 'post'
    })
    if (response.data.code === 200) {
      ElMessage.success(response.data.message || '结账成功')
      orderDetailVisible.value = false
      
      // 刷新订单列表
      if (activeMenu.value === 'today') {
        await fetchTodayOrders()
      } else if (activeMenu.value === 'history') {
        await fetchHistoryOrders()
      }
    } else {
      ElMessage.error(response.data.message || '结账失败')
    }
  } catch (error) {
    console.error('结账失败:', error)
    ElMessage.error('结账失败')
  }
}

const handleMenuSelect = (key) => {
  activeMenu.value = key
  if (key === 'today') {
    fetchTodayOrders()
  } else if (key === 'history') {
    fetchHistoryOrders()
  }
}

const refreshTodayOrders = () => {
  fetchTodayOrders()
}

const searchHistoryOrders = () => {
  if (!dateRange.value || dateRange.value.length === 0) {
    ElMessage.warning('请选择日期范围')
    return
  }
  // 调用日期范围搜索功能
  searchHistoryOrdersByDateRange()
}

const clearDateRange = () => {
  dateRange.value = []
  ElMessage.info('日期范围已清空')
}

const resetHistoryOrders = async () => {
  dateRange.value = []
  await fetchHistoryOrders()
  ElMessage.success('历史订单已重置')
}

const viewOrderDetail = async (order) => {
  selectedOrder.value = order
  orderDetailVisible.value = true
  // 获取订单明细
  await fetchOrderItems(order.orderId)
}

const handleCloseOrderDetail = () => {
  orderDetailVisible.value = false
  selectedOrder.value = null
  orderItems.value = []
}

const addReservation = () => {
  ElMessage.info('新增预约功能开发中')
}

const approveReservation = (id) => {
  ElMessage.success('预约已同意')
}

const rejectReservation = (id) => {
  ElMessage.warning('预约已拒绝')
}

const addQueueOrder = () => {
  ElMessage.info('添加取号桌型功能开发中')
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取订单状态样式类
const getStatusClass = (status) => {
  if (!status) return ''
  
  switch (status.toString().toLowerCase()) {
    case 'paid':
      return 'status-paid'
    case 'pending':
    case 'pending_pay':
      return 'status-pending'
    case 'completed':
      return 'status-completed'
    case 'waiting':
    case 'pending_pickup':
      return 'status-waiting'
    case 'expired':
      return 'status-expired'
    case 'cancelled':
    case 'canceled':
      return 'status-expired'
    case 'processing':
      return 'status-waiting'
    case 'delivered':
      return 'status-completed'
    case 'refunded':
      return 'status-expired'
    default:
      return ''
  }
}

// 获取订单状态文本
const getStatusText = (status) => {
  if (!status) return '未知状态'
  
  switch (status.toString().toLowerCase()) {
    case 'paid':
      return '已付款'
    case 'pending':
    case 'pending_pay':
      return '待付款'
    case 'completed':
      return '已完成'
    case 'waiting':
    case 'pending_pickup':
      return '待取餐'
    case 'expired':
      return '已过期'
    case 'cancelled':
    case 'canceled':
      return '已取消'
    case 'processing':
      return '处理中'
    case 'delivered':
      return '已送达'
    case 'refunded':
      return '已退款'
    default:
      console.log(`未知状态值: ${status}`) // 调试日志
      return `未知状态(${status})`
  }
}

// 获取订单类型文本
const getOrderTypeText = (orderType) => {
  switch (orderType) {
    case 'dine_in':
      return '堂食点餐'
    case 'scan_qr':
      return '扫码点餐'
    case 'reserved':
      return '预约点餐'
    default:
      return '未知类型'
  }
}

// 获取支付方式文本
const getPaymentMethodText = (payMethod) => {
  switch (payMethod) {
    case 'wechat':
      return '微信支付'
    case 'alipay':
      return '支付宝'
    case 'cash':
      return '现金支付'
    default:
      return '未知方式'
  }
}

onMounted(() => {
  // 初始化加载今日订单
  fetchTodayOrders()
  // 运行状态测试
  runStatusTest()
})
</script>

<style scoped>
.orders-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.orders-container {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border-right: none;
}

.main-content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h3 {
  margin: 0;
  color: #303133;
}

.search-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-result-info {
  margin-bottom: 16px;
}

.loading-container {
  padding: 20px;
}

.empty-container {
  padding: 40px;
  text-align: center;
}

.order-list,
.reservation-list,
.queue-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-item,
.reservation-item,
.queue-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.order-item:hover,
.reservation-item:hover,
.queue-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.order-header,
.reservation-header,
.queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.order-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.order-number {
  font-weight: 600;
  color: #303133;
}

.order-time {
  color: #909399;
  font-size: 14px;
}

.order-status,
.reservation-status,
.queue-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-paid {
  background: #f0f9ff;
  color: #409eff;
}

.status-pending {
  background: #fdf6ec;
  color: #e6a23c;
}

.status-completed {
  background: #f0f9ff;
  color: #67c23a;
}

.status-waiting {
  background: #f0f9ff;
  color: #409eff;
}

.status-expired {
  background: #fef0f0;
  color: #f56c6c;
}

.order-content,
.reservation-content,
.queue-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.customer-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.customer-name {
  font-weight: 500;
  color: #303133;
}

.table-number,
.people-count,
.phone,
.queue-time,
.operator,
.table-type,
.order-type {
  color: #909399;
  font-size: 14px;
}

.order-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.total-amount {
  font-size: 18px;
  font-weight: 600;
  color: #f56c6c;
}

.payment-method {
  color: #909399;
  font-size: 14px;
}

.order-actions {
  display: flex;
  gap: 8px;
}

.reservation-actions {
  display: flex;
  gap: 8px;
}

.order-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 16px;
}

.order-summary-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  font-size: 16px;
}

.total-amount {
  color: #f56c6c;
  font-weight: 600;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 